import React from "react";
import {
  Card,
  Descriptions,
  Typography,
  Space,
  Tag,
  Skeleton,
  Avatar,
} from "antd";
import {
  UserOutlined,
  CalendarOutlined,
  EnvironmentOutlined,
  BookOutlined,
} from "@ant-design/icons";
import styled from "styled-components";
import type { CourseInfo as CourseInfoType } from "../../types";

const { Title, Paragraph } = Typography;

const StyledCard = styled(Card)`
  margin-bottom: 24px;
  .ant-card-head-title {
    font-weight: bold;
  }
`;

interface CourseInfoProps {
  courseInfo?: CourseInfoType;
  loading?: boolean;
}

const CourseInfo: React.FC<CourseInfoProps> = ({ courseInfo, loading }) => {
  if (loading) {
    return <Skeleton active paragraph={{ rows: 4 }} />;
  }

  if (!courseInfo) {
    return null;
  }

  return (
    <div>
      <StyledCard title="课程介绍">
        <Paragraph>{courseInfo.description}</Paragraph>
      </StyledCard>

      <StyledCard title="课程详情">
        <Descriptions column={2}>
          <Descriptions.Item
            label={
              <Space>
                <UserOutlined />
                授课教师
              </Space>
            }
          >
            <Space>
              <Avatar icon={<UserOutlined />} />
              {courseInfo.teacherName}
            </Space>
          </Descriptions.Item>

          <Descriptions.Item
            label={
              <Space>
                <CalendarOutlined />
                上课时间
              </Space>
            }
          >
            {courseInfo.schedule}
          </Descriptions.Item>

          <Descriptions.Item
            label={
              <Space>
                <EnvironmentOutlined />
                上课地点
              </Space>
            }
          >
            {courseInfo.classroom}
          </Descriptions.Item>

          <Descriptions.Item
            label={
              <Space>
                <BookOutlined />
                学分
              </Space>
            }
          >
            {courseInfo.credit}
          </Descriptions.Item>
        </Descriptions>
      </StyledCard>

      <StyledCard title="教学目标">
        <ul>
          <li>理解操作系统的基本概念和原理</li>
          <li>掌握进程管理、内存管理、文件系统等核心知识</li>
          <li>能够运用所学知识解决实际问题</li>
          <li>培养系统思维和问题解决能力</li>
        </ul>
      </StyledCard>

      <StyledCard title="考核方式">
        <Space direction="vertical" style={{ width: "100%" }}>
          <div>
            <Tag color="blue">平时成绩</Tag>
            <span style={{ marginLeft: 8 }}>40%（含出勤、作业、实验等）</span>
          </div>
          <div>
            <Tag color="green">期中考试</Tag>
            <span style={{ marginLeft: 8 }}>20%</span>
          </div>
          <div>
            <Tag color="red">期末考试</Tag>
            <span style={{ marginLeft: 8 }}>40%</span>
          </div>
        </Space>
      </StyledCard>

      <StyledCard title="参考教材">
        <ul>
          <li>《操作系统概念》（第9版）- Abraham Silberschatz等著</li>
          <li>《现代操作系统》（第4版）- Andrew S. Tanenbaum著</li>
        </ul>
      </StyledCard>
    </div>
  );
};

export default CourseInfo;
